<!--
* @FileDescription: 开关量步骤图表组件
* @Author: yuec621@outlook.com
* @Date: 2024-11-20 12:30:42
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-12-30 12:30:42
-->
<template>
    <!-- 横向状态图和横向折线图及自定义y轴label -->
    <div id="comChart" style="width: 100%;height: 500px;">
    </div>
</template>
<script setup>
    import {
        nextTick,
        watchEffect
    } from 'vue';
    import * as echarts from 'echarts'
    import dayjs from 'dayjs'
    import printJS from "print-js";
    import useUserStore from "@/store/modules/user";
    const {
        proxy
    } = getCurrentInstance();
    const userStore = useUserStore();
    import _ from 'lodash'
    const props = defineProps({
        chartList: {
            type: Object,
            default: () => {
                return {}
            }
        },
        attrObj: {
            type: Object,
            default: () => {
                return undefined
            }
        },
        toolType: {
            type: String,
            default: () => {
                return ''
            }
        },
    })
    let comChart

    function setC1(arr) {
        // 1-->2-->3
        let xdata = []
        let colors = ['rgba(212, 63, 63, 1)', 'rgba(42, 130, 228, 1)', 'rgba(121, 72, 234, 1)']
        let yAxisList = []
        let xAxisList = []
        let serList = []
        let grid = []
        let dataZoom = []
        if (JSON.stringify(arr) != "{}") {
            xdata = arr.allTimes.map(item => {
                return dayjs(item).format('YYYY-MM-DD HH:mm:ss')
            })
            arr.hisSwitchLines.forEach((item, index) => {
                console.log(item,"打撒啥课")
                let larr = item.hisSwitchLinePoints
                    .map((sub1, i) => {
                        return sub1.valueStr != null ? sub1.valueStr : ''
                    })
                let larrnew = _.uniqBy(larr)
                grid.push({
                    left: '6%',
                    top: index * 35 + 10 + '%',
                    height: (arr.hisSwitchLines.length == 1 ? '85' : '50') / arr.hisSwitchLines.length +
                        '%',
                    right: 30,
                    bottom: '10%'
                })
                yAxisList.push({
                    name: index == 0 ? props.attrObj && props.attrObj.chartY : '',
                    gridIndex: index,
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(91, 109, 128, 0.16)',
                            type: 'dashed'
                        }
                    },
                    splitNumber: 0.5,
                    name: "{a" + "|" + item.pointId + '\t\t\t\t\t\t\t\t\t' + "}",
                    nameLocation: '',
                    nameTextStyle: {
                        color: '#000',
                        align: 'right',
                        verticalAlign: 'middle',
                        rich: {
                            a: {
                                color: "#000",
                                fontWeight: "800",
                                fontSize: 14
                            },
                            b: {
                                padding: [0, 10, 0, 0]
                            },
                            underline: { //模拟画下划线
                                backgroundColor: 'rgba(218, 231, 255, 1)',
                                position: 'bottom',
                                height: 1,
                                width: 100
                            }
                        },
                    },
                })
                xAxisList.push({
                    name: arr.hisSwitchLines.length == index + 1 ? 
                    props.attrObj && props.attrObj
                        .chartX : '',
                    gridIndex: index,
                    show: arr.hisSwitchLines.length == index + 1 ? true : false,
                    type: "category",
                    boundaryGap: false,
                    data: xdata,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(91, 109, 128, 0.8)'
                        }
                    },
                })
                serList.push({
                    type: "line",
                    step: "start",
                    data: item.hisSwitchLinePoints
                        .map((sub1, i) => {
                            return sub1.value!=2?sub1.value:null
                        }),
                    xAxisIndex: index,
                    yAxisIndex: index,
                    smooth: false,
                    symbol: 'none',
                    lineStyle: {
                        color: item.lineColor ? item.lineColor : colors[index]
                    },
                    markLine: {
                        symbol: "none",
                        silent: false,
                        data: [{
                                yAxis: 1,
                                label: {
                                    show: true,
                                    position: "start",
                                    formatter:item.lengedList&&item.lengedList[1].connotation,
                                    fontSize:14
                                },
                                lineStyle:{
                                    color:"transparent"
                                }
                            },
                            {
                                yAxis: 0,
                                label: {
                                    show: true,
                                    position: "start",
                                    formatter:item.lengedList&&item.lengedList[0].connotation,
                                    fontSize:14
                                },
                                lineStyle:{
                                    color:"transparent"
                                }
                            },
                        ],
                    },
                })
            })
        }
        let option = {
            title: [{
                text: props.attrObj && props.attrObj.chartTitle,
                textAlign: "center",
                left: "center",
                top: 10,
            }],
            dataZoom: dataZoom,
            color: colors,
            grid: grid,
            xAxis: xAxisList,
            yAxis: yAxisList,
            series: serList
        };
        comChart.setOption(option, true)
    }
    watchEffect(() => {
        console.log(props.attrObj,'props.attrObj');
        
        if (props.toolType == '13') {
            let statesrc = comChart.getDataURL({
                type: "png", //jpeg | jpeg
                pixelRatio: 1,
                backgroundColor: "#fff", //背景色白色
            });
            printJS({
                printable: statesrc, //表格的数据
                type: "image",
                imageStyle: "width:100%;height:100%; margin-bottom:0px;",
            });
        }
        if (JSON.stringify(props.chartList) != "{}") {
            nextTick(() => {
                comChart = echarts.init(document.getElementById("comChart"));
                setC1(props.chartList)
            })
        } else {
            nextTick(() => {
                // comChart = echarts.init(document.getElementById("comChart"));
                // setC1({})
            })
        }
    })
    onMounted(() => {
        window.addEventListener('resize', () => {
            if(comChart){
                comChart.resize()
            }
        })
    })
</script>